import React, { useEffect, useState,createContext} from "react";
import { useNavigate } from "react-router-dom";
import {
  Button,
  Input,
  Form,
  Cascader,
  DatetimePicker,
  Field,
  Radio,
} from "react-vant";
import options from "./options";
export default () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [value, setValue] = useState(new Date());

  console.log(value);
  // 从localStorage获取对应form的数据并解析（这里需要确保form对应的存储值是合法的JSON格式字符串）
  const storedData = JSON.parse(localStorage.getItem("form") as string) || [];
  // 重新初始化datalist状态为从localStorage获取到的数据（如果获取失败则为默认的空数组）
  let [datalist, setDatalist] = useState<any>(storedData);
  const onFinish = (values: any) => {
    // 将新接收到的值合并到当前的datalist数组中
    const newDataList = [...datalist, values];
    // 更新状态
    setDatalist(newDataList);
    // 将更新后的数组重新存储到localStorage中。
    localStorage.setItem("form", JSON.stringify(newDataList));
    console.log(values);
    navigate("/cunhuanzhe");
  };
  return (
    <Form
      form={form}
      onFinish={onFinish}
      footer={
        <div style={{ margin: "16px 16px 0" }}>
          <Button round nativeType="submit" type="primary" block>
            保存
          </Button>
        </div>
      }
    >
      <Form.Item
        rules={[{ required: true, message: "请填写用户名" }]}
        name="username"
        label="用户名"
      >
        <Input placeholder="请输入患者姓名" />
      </Form.Item>
      <Form.Item
        rules={[{ required: true, message: "请填写用户名" }]}
        name="sex"
        label="用户名"
      >
        <Radio.Group defaultValue="男" direction="horizontal">
          <Radio name="男">男</Radio>
          <Radio name="女">女</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        rules={[{ required: true, message: "请填写日期" }]}
        name="password"
        label="出生日期"
      >
        <DatetimePicker
          popup={{
            round: true,
          }}
          type="date"
          title="选择年月日"
          minDate={new Date(1970, 0, 1)}
          maxDate={new Date(2025, 10, 1)}
          value={value || new Date()} // 确保value有默认值
          onConfirm={setValue}
        >
          {(val: Date | undefined, _: any, actions: { open: () => void }) => {
            return (
              <Field
                readOnly
                clickable
                value={val?.toLocaleDateString()}
                placeholder="请选择日期"
                onClick={() => actions.open()}
              />
            );
          }}
        </DatetimePicker>
      </Form.Item>
      <Form.Item
        rules={[{ required: true, message: "请填写地址" }]}
        name="address"
        label="所在地区"
      >
        <Cascader
          popup={{ round: true }}
          title="请选择所在地区"
          options={options}
        >
          {(_, selectedRows: any[], actions) =>
            selectedRows && selectedRows.length > 0 ? (
              <Field
                isLink
                value={selectedRows.map((item) => item.text).join(",")}
                readOnly
                placeholder="请选择所在地区"
                onClick={() => actions.open()}
              />
            ) : (
              <Field
                isLink
                value=""
                readOnly
                placeholder="请选择所在地区"
                onClick={() => actions.open()}
              />
            )
          }
        </Cascader>
      </Form.Item>

      <Form.Item
        rules={[{ required: true, message: "请填写联系方式" }]}
        name="phone"
        label="联系方式"
      >
        <Input placeholder="请输入联系方式" />
      </Form.Item>
    </Form>
  );
};
